<template>
  <comTitle>
    <template #title>
      <div class="tabList flex-common familyC" v-if="tabList.length > 0">
        <div
          class="tabItem mr-70 fs-17 cr-hui4 flex-column"
          v-for="(item, index) in tabList"
          @click="tapIndex(item, index)"
          :key="index"
        >
          <div :class="[commonIndex === index ? 'cr-hui' : 'cr-hui4', 'mb-10']">
            {{ item.name }}
          </div>
          <div :class="[commonIndex === index ? 'bg' : '', 'line']"></div>
        </div>
      </div>
      <div
        class="inputtitle"
        :style="{ width: width > 0 ? width + 'px' : 185 + 'px' }"
        v-if="title.length > 0"
      >
        {{ title }}
      </div>
      <el-input
        v-if="tabList.length === 0"
        v-model="value"
        :placeholder="placeholder"
        @input="(event) => $emit('outlabValue', event)"
      ></el-input>
      <div class="more" v-if="showAdd" @click="add">新增</div>
    </template>
  </comTitle>
</template>

<script>
export default {
  name: "laboratoryRightHeader",
  props: {
    tabList: {
      type: Array,
      default: () => {
        return new Array();
      },
    },
    title: {
      type: String,
      default: "",
    },
    width: {
      type: Number,
      default: -1,
    },

    placeholder: {
      type: String,
      default: "请输入内容",
    },
    commonIndex: {
      type: Number,
      default: 0,
    },
    showAdd: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {
    tapIndex(item, index) {
      this.$emit("setTab", index);
    },
    add() {
      this.$emit("setDailog", true);
    },
  },
};
</script>

<style lang="scss" scoped>
.commonTitle {
  height: 74px !important;
  margin: 0px 24px;
  width: auto !important;
  position: relative;
}
.more {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  margin-left: 24px;
  width: 90px;
  height: 28px;
  border: 1px solid #00bfb1;
  border-radius: 2px;
  text-align: center;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00bfb1;
  line-height: 28px;
}
.inputtitle {
  width: 185px;
}
/deep/ .el-input__inner {
  width: 180px;
  height: 28px;
  padding: 0px 16px;
}
.tabList {
  cursor: pointer;
  .line {
    width: 40px;
    height: 4px;
    background: #dde4eb;
    // border: 1px solid #dde4eb;
    border-radius: 3px;
  }
  .bg {
    background: #00bfb1 !important;
  }
}
</style>